<template>
	<div class="sys-file-container">
	<el-dialog v-model="isShowDialog"  draggable :close-on-click-modal="false" :append-to-body="true" width="580px">
		<template #header>
			<div style="color: #fff">
				<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-UploadFilled /> </el-icon>
				<span> 上传文件 </span>
			</div>
		</template>
		<el-form :model="ruleForm" ref="ruleFormRef" label-width="auto">
		<div>
			<a style="color: orangered;">文件类型：</a> 
			<el-select v-model="state.sysFileTypeId" placeholder="请选择文件类型" clearable>
				<el-option
				      v-for="item in state.filetypeData"
				      :key="item.id"
				      :label="item.name"
				      :value="item.id"
				    />
			</el-select>
			<el-upload ref="uploadRef" 
			 class="upload-demo"
			 drag
			 :auto-upload="false" 
			 :limit="1" 
			 :file-list="state.fileList" 
			 action="" 
			 :on-change="handleChange">
				<el-icon class="el-icon--upload">
					<ele-UploadFilled />
				</el-icon>
				<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
				<template #tip>
					<div class="el-upload__tip">请上传大小不超过 10MB 的文件</div>
				</template>
			</el-upload>
		</div>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="cancel" size="default">取 消</el-button>
				<el-button type="primary" @click="submit" size="default" :loading="state.loading">确 定</el-button>
			</span>
		</template>
	</el-dialog>
	</div>
</template>

<script lang="ts" setup name="sysUpdateFile">
	import { ref,reactive,onMounted } from "vue";
	import { ElMessage } from "element-plus";
	import { getFileType,addFile } from '/@/api/system/fileType';
	import { fileToBase64 } from "/@/utils/base64Conver";
	//父级传递来的参数
	var props = defineProps({
	title: {
	type: String,
	default: "",
	},
	});
	const ruleForm = ref<any>({});
	const state = reactive({
		ParentIdcommonData: [],
		fileList:[] as any,
		videoList:[] as any,
		imagefile:{}as any,
		filetypeData:[],
		sysFileTypeId:'',
		loading:false,
	});
	// 打开弹窗
	const openDialog = () => {
		state.fileList=[];
		isShowDialog.value = true;
		handleQueryFileType();
		ruleFormRef.value?.resetFields();
	};
	
	//父级传递来的函数，用于回调
	const emit = defineEmits(["handleQuery"]);
	const ruleFormRef = ref();
	const isShowDialog = ref(false);
	// 取消
	const cancel = () => {
	  isShowDialog.value = false;
	};
	// 通过onChanne方法获得文件列表
	const handleChange = (file: any, fileList: []) => {
		state.fileList = fileList;
		fileToBase64(state.fileList[0].raw).then(x=>{
			state.imagefile={strBase64: x,fileName:state.fileList[0].raw.name,contentType:state.fileList[0].raw.type} ; 
		});
	};
	// 提交
	const submit = async () => {
	  ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => {
	    if (isValid) {
	      let values = ruleForm.value;
		   values.fileBase64=state.imagefile;
		   values.sysFileTypeId=state.sysFileTypeId;
		   state.loading=true;
	      var re=  await addFile(values);
		  state.loading=false;
		  if(re.data.code==200){
			  state.fileList=[];
			  ElMessage.success('上传成功');
			    emit("handleQuery");
		  }	
	    } else {
	      ElMessage({
	        message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
	        type: "error",
	      });
	    }
	  });
	};
	// 关闭弹窗
	const closeDialog = () => {
	  emit("handleQuery");
	  isShowDialog.value = false;
	};
	//查询文件类型
	const handleQueryFileType = async () => {
			var res = await getFileType();
			state.filetypeData = res.data.result?? [];
		};
	// 导出对象
	defineExpose({ openDialog });	
</script>

<style>
</style>